<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
   *{margin:0;padding:0; list-style: none;} 
   body{
    background:url(images/bg.ipg);background-size:100%auto;
   }
   .auto{
    overflow:hidden;
   }
     .silderbox{width: 800px; height:400px; position: absolute; top:50%; margin-top:-200px; margin-left:-400px;border-radius: 10px;}
      .sildetboxul{ position: relative; .silderboxulli{ width: 800px: height:400px; overflow: hidden; display: none; position: absolute; top:0; left:0; #img1{display: block; }
      .silderboxul li img{ width: 800px; height: auto; .silderboxul li position:absolute; bottom: 10px; left:0; background: rgba(0,0,0,.5); color: #fff; line-height:40px; width:100%; text-align:center; #time{display: block; width: 20px; height:20px; background: #fff; text-align: center; line-height:20px; font-size:14px; color #dd00ff; position: absolute; right:20px; top:20px; border-radius: 20px; #timeline{width:0%; height: 10px: border-radius: 10px; background: #1499f8; position: absolute; left:0; bottom:0; @keyframesmyfirst from{width:0%;} {width:100%;}@-webkit-keyfames myfist{ from {width:0%;} .ani-time-line{animation: myfirst 5s linear; -webkit-animation: myfirst 5s linear;
		</style>
		<script
			src="https://code.jquery.com/jquery-3.4.1js"
			integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
			crossorigin="anonymous"
		></script>
	</head>
	<body>
		<div class="silderbox auto">
			<ul id="imglist"></ul>
			<span id="time">5</span> <span id="timeline"></span>
		</div>
		<script src="images.js"></script>
		<script>
			(vari=0;i<data.length;i++){$(�0�7#imglist�0�7).append(�0�7<liid="img�0�7+(i+1) "><imgsrc=" data[i][�0�7img�0�7]+ �0�7"alt=""><p>�0�7+data[i][�0�7desc�0�7]+�0�7</p></li>�0�7) varn=1;var initTime=5; vartime=5; function changelmg(x){ $(#img�0�7+i).fadeIn()}else{ $("#img�0�7+i).fadeOut() $(�0�7#timeline�0�7).removeClass(�0�7ani-time-line�0�7)setTimeout(function(){ $(�0�7#timeline�0�7).addClass(�0�7ani-time-line�0�7) },10) $(�0�7#timeline�0�7).addClass(�0�7ani-time-line�0�7)setInterval(function (time===-1){time=initTime $(�0�7#time�0�7).html(time)},1000)
		</script>
	</body>
</html>
